<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <%--引入element的js--%>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="/js/axios.min.js"></script>
  <%--引入elementui的样式--%>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-table
          :data="staffs"
          border
          style="width: 100%">
    <el-table-column
            prop="operid"
            label="编号"
    >
    </el-table-column>
    <el-table-column
            prop="businesstype"
            label="操作类型"
    >
    </el-table-column>
    <el-table-column
            prop="opername"
            label="操作人员">
    </el-table-column>
    <el-table-column
            prop="operurl"
            label="请求地址 ">
    </el-table-column>

    <el-table-column
            prop="operid"
            label="操作地址">
    </el-table-column>
    <el-table-column
            prop="opertime"
            label="操作日期">
    </el-table-column>
    <el-table-column
            fixed="right"
            prop="status"
            label="状态"
    >
      <template slot-scope="scope">
        <el-tag
                v-if="scope.row.status === 0"
                type="info"
                disable-transitions>禁用
        </el-tag>
        <el-tag
                v-else="scope.row.status === 1"
                type="success"
                disable-transitions>启用
        </el-tag>
      </template>
    </el-table-column>

  </el-table>
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,15,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
  </el-pagination>
</div>
<script>
  let  app=new Vue({
    el:"#app",
    data:{
      staffs:[],
      currentPage:1,
      pageSize:5,
      total:0
    },
    created(){
      this.getLog()
    },
    methods:{
      getLog(){

        axios.get("/sysoper/select/"+this.currentPage+"/"+this.pageSize).then(res=>{
          this.staffs=res.data.data.list;
          this.total=res.data.data.total;
        })
      },
      handleSizeChange(val){
        this.pageSize=val;
        this.getLog();
      },
      handleCurrentChange(val){
        this.currentPage=val;
        this.getLog();
      },

   }
   })
</script>
</body>
</html>
